<template>
  <view class="photos-generated" v-cloak>
    <view class="photos-list">
      <view class="list-main" v-if="doctorList.length">
        <view class="list-item" v-for="(item,idx) in doctorList" :key="idx" @click="handleSelect(item)">
          <image :src="item.avatar || '../static/doctor-default.png'" mode="aspectFill" class="item-img"></image>
          <view class="item-info">
            <h2>{{item.realName}} <span>{{item.jobTitle}}</span></h2>
            <view class="info-sub">{{item.orgName}}</view>
            <view class="info-p">从业{{item.workYear}}年 <span style="color: #B0B0B0; font-size: 22rpx;margin: 0 8rpx">|</span> 服务人数{{item.serviceNumber}}</view>
            <view class="info-store dot">{{selectStore.name}}</view>
          </view>
          <view class="item-handle">
            <image class="img" src="@/static/doctor/select-on.svg" mode="aspectFill" v-if="item.id == doctorId"></image>
            <image class="img" src="@/static/doctor/select-icon.svg" mode="aspectFill" v-else></image>
          </view>
        </view>
      </view>
    </view>
    <view class="generated-footer">
      <!-- <view class="button cancel">更多医生</view> -->
      <view class="button submit" @click="handleSubmit()">生成报告</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        doctorList:[],
        doctorId:'',
        ossData:{}
      };
    },
    onLoad() {
      this.$get('/common/external/aliyun/getToken').then(res=>{
        this.ossData = res.content
      })
      uni.showLoading({
        title:'加载中'
      })
      this.$get('/merchant/v1/staff/selectStaffByJob',{
        orgId:uni.getStorageSync('selectStore').id,
        positionCode:'doctor'
      },'1').then(res=>{
        this.doctorList = res.content
      })
    },
    methods:{
      handleSelect(e){  //  选择医生
        if (e.id == this.doctorId) {
          this.doctorId = ''
        } else {
          this.doctorId = e.id
        }
      },
      async handleSubmit(){
        if(!this.doctorId) return this.$toast('请先选择医生')
        const imagePaths = uni.getStorageSync('ChangeReportInfo')
        try {
          const uploadPromises = imagePaths.map((path) => this.uploadFilePromise(path));
          const results = await Promise.all(uploadPromises);
          const data = {
            "creportToothPositionAddReqs": results,
            "doctorId": this.doctorId,
            "merchantId": uni.getStorageSync('selectStore').merchantId,
            "orgId": uni.getStorageSync('selectStore').id
          }
          uni.showLoading({
            title:'加载中...'
          })
          this.$post('/yahe/report/save',data,'1').then(res=>{
            if(res.code == '1'){
              this.$toast('提交成功','success')
              setTimeout(e=>{
                uni.navigateTo({
                  url:'/doctorPackage/report-list'
                })
              },1000)
            }else{
              this.$toast(res.message)
            }
          })
        } catch (error) {
          console.error('图片上传过程中出现错误', error);
          this.$toast('图片上传失败')
        }
      },
      uploadFilePromise(filePath) {  ///  多张图片上传
        let channel = 'activity-weixin-h5'
        /*#ifdef MP-WEIXIN*/
        channel = 'activity-weixin-mini'
        /*#endif*/
        // #ifdef MP-TOUTIAO
        channel = 'event-douyin-mini'
        // #endif
        return new Promise((resolve, reject) => {
          const relaUrl = this.ossData.dir+parseInt(Date.parse(new Date()) + Math.random() * 100000) + '.jpg'
          uni.uploadFile({
            url: this.ossData.host, //仅为示例，非真实的接口地址
            filePath: filePath,
            name: 'file',
            formData: {
              key: relaUrl,
              OSSAccessKeyId: this.ossData.accessid,
              policy: this.ossData.policy,
              Signature: this.ossData.signature,
            },
            header: {
              sassAppId:this.$sassAppId,
              token: uni.getStorageSync('token'),
              channel,
            },
            success: (uploadFileRes) => {
              resolve({
                toothName:relaUrl,
                toothUrl:this.ossData.host + '/' + relaUrl
              });
            },
            fail: (res) => {
              reject(err);
            }
          })
        });
      },
    }
  }
</script>

<style lang="less" scoped>
.photos-generated{
  min-height: 100vh;
  box-sizing: border-box;
  .photos-list{
    
    .list-item{
      display: flex;
      align-items: center;
      padding: 24rpx;
      background: #fff;
      .item-img{
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        margin-right: 24rpx;
      }
      .item-info{
        flex: 1;
        margin-right: 20rpx;
        h2{
          font-size: 28rpx;
          color: var(--title-color);
          font-weight: bold;
          span{
            line-height: 1;
            font-weight: 400;
            font-size: 18rpx;
            padding: 6rpx 14rpx;
            color: var(--theme-color);
            background: #F0FDFA;
            border-radius: 32rpx;
            margin-left: 6rpx;
            border: 2rpx solid #D9F4F2;
          }
        }
        .info-sub{
          font-size: 22rpx;
          margin: 12rpx 0;
          color: #6D6D6D;
        }
        .info-p{
          font-size: 22rpx;
          font-weight: bold;
          color: var(--title-color);
        }
        .info-store{
          font-size: 22rpx;
          margin: 12rpx 0;
          color: #6D6D6D;
        }
        .info-footer{
          color: var(--sub-title);
          font-size: 22rpx;
          line-height: 33rpx;
        }
      }
      .item-handle{
        .img{
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
  .generated-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 24rpx 68rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    .button{
      color: #fff;
      line-height: 56rpx;
      width: 142rpx;
      text-align: center;
      background: var(--theme-color);
      border-radius: 8rpx;
      font-size: 24rpx;
      border: 2rpx solid var(--theme-color);
      &.submit{
        flex: 1;
      }
      &.cancel{
        border-color: var(--border-color);
        color: #6D6D6D;
        background: #fff;
      }
    }
  }
}
</style>
